<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        table{
            border-collapse: collapse;
            margin: 0 auto;
        }
        th,td{
            border: 1px solid #000;
            width: 150px;
            height: 50px;
            text-align: center;
        }
        th{
            background-color: #ccc;
        }
        .bg{
            background-color: #7DB3FA;
        }
    </style>
</head>

<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>xx</td>
                    <td>xx</td>
                    <td>xx</td>
                    <td>xx</td>
                    <td>xx</td>
                </tr> -->
                <tr v-for="item of arr" :key="item.id" :class="{bg:item.score>=90}">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.score}}</td>
                    <td>
                        <span v-if="item.score >= 90">优秀</span>
                        <span v-else-if="item.score >=80">良好</span>
                        <span v-else-if="item.score >=60">及格</span>
                        <span v-else>不及格</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                arr: [
                    { id: 1, name: '诸葛亮', sex: '男', score: 98 },
                    { id: 2, name: '周瑜', sex: '男', score: 88 },
                    { id: 3, name: '刘阿斗', sex: '男', score: 50 },
                    { id: 4, name: '曹植', sex: '男', score: 90 },
                    { id: 5, name: '张飞', sex: '男', score: 70 },
                    { id: 6, name: '曹丕', sex: '男', score: 55 }
                ]
            }
        },
        methods:{

        }
    })
</script>

</html>